<template>
	<view	class="ikz-screen" v-if="show_info.show" :animation="animationData">
    <view class="ikz-screen-box">
      <view class="ikz-screen-close-box" @click="closeScreen">
        <image class="ikz-screen-close" src="/static/updata/del.png"></image>
      </view>
      <view class="ikz-screen-title">
        {{show_info.title}}
      </view>
      <view class="ikz-screen-content">
        <rich-text :nodes="show_info.content"></rich-text>
      </view>
    </view>
	</view>
</template>

<script>
import ikz from '@/pages/Common/tools';
export default {
	name: 'screen',
	props: {
		showData: {
			type: Object
		}
	},
	data() {
		return {
			show_info:{
        show:false
      },
      animationData: {}
		};
	},
	watch: {
		showData: {
			handler(newName, oldName) {
        if(newName.content){
          this.show_info ={
            title:newName.title,
            // content:newName.content,
            content:newName.content.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, 'style="width:100%;height:auto;"'),
            show:newName.show||false
          }
          this.$forceUpdate();
        }
			},
			immediate: true,
			deep: true
		}
	},
	mounted() {},
	methods: {
		closeScreen(){
      this.$emit('closeScreen',false)
      this.show_info.show = false
    }
	}
};
</script>

<style lang="scss" scoped>
  .ikz-screen{
    position: fixed;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(000,000,000,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .ikz-screen-box{
    position: relative;
    width: 90%;
    margin: 0 auto;
    background: #fff;
    border-radius: 15rpx;
  }
  .ikz-screen-close-box{
    position: absolute;
    right: -6px;
    top: -6px;
    width: 50rpx;
    height: 50rpx;
    background: #fff;
    overflow: hidden;
    border-radius: 50%;
  }
  .ikz-screen-close{
    width: 50rpx;
    height: 50rpx;
  }
  .ikz-screen-content{
    box-sizing: border-box;
    padding: 20rpx;
    width: 100%;
    max-height: 800rpx;
    overflow-y: auto;
  }
  .ikz-screen-title{
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 35rpx;
  }
</style>
